import React, { Component } from 'react';
import { Layout, Menu  } from 'antd';
import MenuStyle from './menu.css';
import routes from '../../router/router';
import { Link } from 'react-router-dom';
import {
    CodepenCircleOutlined
  } from '@ant-design/icons';
const { Sider } = Layout;
const { SubMenu } = Menu;

export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {
            titles:'城市运营管理中心',
            selectedMenu:'infoManage',
            openKeys:'dashboard',
            options:['dashboard', 'maps', 'center','alarmMgmt','cityInfo', 'cityPlan']
        }
    }
    componentDidMount() {
        this.getSelectedMenu();  
    }

    getSelectedMenu = () =>{
        let menuID = window.sessionStorage.getItem('selcetedKey');
        if(menuID != null){
            this.setState({selectedMenu:menuID})
        }
    }

    menuClick = (item) => {
        sessionStorage.setItem('selcetedKey', item.key);
        this.setState({selectedMenu: item.key})
    }

    onOpenChange = keys => {
        const  { openKeys, options }  = this.state;
        const latestOpenKey = keys.find(key => [openKeys].indexOf(key) === -1);
        if (options.indexOf(latestOpenKey) === -1) {
            this.setState({openKeys:keys})
        } else {
            let last = latestOpenKey ? latestOpenKey : []
            this.setState({openKeys:last})
        }
      };

    render() {
        const route = routes.find((item) => item.key === 'index');
        const { titles, selectedMenu, openKeys } = this.state
        const { collapsed } = this.props;
        return (
            <div style={{position:'fixed'}}>
                <div style={{color:'#fff',fontSize:17,margin:6,marginTop:19,marginBottom:14,}}><CodepenCircleOutlined spin style={{fontSize:25,position:'relative',top:2}} /> {titles}</div>
                <Menu theme="dark" onClick={this.menuClick} key='Menu'  mode="inline" openKeys={[openKeys]} onOpenChange={this.onOpenChange} selectedKeys={ [selectedMenu] } defaultSelectedKeys={['infoManage']} defaultOpenKeys={['dashboard']}>
                    {
                        route.routes.map((item) => {
                            if (item.title) {
                                if (item.routes) {
                                    return (
                                        <SubMenu key={item.key}  title={<>{item.icon}{
                                            !collapsed && item.title
                                        }</>}>
                                            {item.routes.map((subItem) => {
                                                if (subItem.title) {
                                                    return (
                                                        <Menu.Item key={subItem.key}>
                                                            <Link to={subItem.path}>{subItem.icon}
                                                                <span>{ !collapsed && subItem.title}</span>
                                                                </Link>
                                                        </Menu.Item>
                                                    );
                                                }
                                            })}
                                        </SubMenu>
                                    );
                                }
                                return (
                                    !item.hiddenInMenu ?
                                    <Menu.Item key={item.key}>
                                        <Link to={item.path}>{item.icon}{ !collapsed && item.title}</Link>
                                    </Menu.Item> :
                                    <></>
                                )

                                
                                      
                            }
                        })
                    }
                </Menu>
            </div>
        )
    } 
}

